/*  1 new class;获取网址?后传递的商品id，发送请求获取商品详细信息，渲染到页面
    2 点击加入购物车时，发送请求加入购物车，如果token过期，携带returnUrl跳转到登录页面，发送请求服务器加入购物车
      提示加入成功
    3 放大镜：
      3.1 修改页面html，添加节点和样式。
      3.2 添加鼠标移入事件，当移入时黄色框显示，大框显示。
      3.3 添加鼠标移出事件，当移出时黄色框和大框隐藏。
      3.4 添加鼠标滑动事件，当鼠标在小框移动时，黄色框跟随鼠标移动，并且有最小和最大距离（即不能超出小图）
          获取鼠标相对于文档的左和上边距，计算大图的offset。img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
 */
class ProDetail {
  constructor() {
    this.getGoodsItem();
    this.bindEve(); //绑定事件的方法
  }
  bindEve() {
    setTimeout(() => {
      this.$(".proImg").onmouseover = this.mouseenter.bind(this);
      this.$(".proImg").onmouseleave = this.mouseleave.bind(this);
      this.$(".proImg").onmousemove = this.mousemove.bind(this);
    }, 500);
  }
  /********获取数据渲染页面********/
  async getGoodsItem() {
    if (!location.search.split("=")[1]) return;
    let { status, data } = await axios.get(
      "http://localhost:8888/goods/item/" + +location.search.split("=")[1]
    );
    if (status != 200) return;
    //判断登陆是否过期
    if (data.code != 1)
      location.assign(
        `login.html?returnUrl=./proDetail.html?${location.search.split("?")[1]}`
      );
    this.$(
      ".proDet"
    ).innerHTML = `<div class="proCon clearfix" style="position: relative">
    <div class="proImg fl" style="position: relative">
    
    <img class="det" src="${data.info.img_big_logo}" />
    <div class="mask" id="mask" style=" width: 290px;
    height: 290px;
    background: rgba(255, 255, 0, 0.4);
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: move;
    display: none;"></div>

    <div class="smallImg clearfix">
        <img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
        <img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
        <img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
        <img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
    </div>
</div>
<div  id="big"  style="display: none; width: 580px;
height: 580px;
position: absolute;
top: 0;
z-index:1;
left: 600px;
overflow: hidden; ">
<img src="${
      data.info.img_big_logo
    }" width="1160px" htight:"1160px" alt="" id="img" style="position: absolute;" />
</div>
<div class="fr intro">
    <div class="title">
        <h4>【最家】${data.info.title}</h4>
        <p>【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p>
        <span>￥${data.info.current_price}</span>
    </div>
    <div class="proIntro">
        <p>颜色分类</p>
        <div class="smallImg clearfix categ">
            <p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
                    data-src="img/temp/proBig01.jpg"></p>
            <p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
                    data-src="img/temp/proBig02.jpg"></p>
            <p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花"
                    data-src="img/temp/proBig03.jpg"></p>
            <p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草"
                    data-src="img/temp/proBig04.jpg"></p>
        </div>
        <p>数量&nbsp;&nbsp;库存<span>${data.info.goods_number}</span>件</p>
        <div class="num clearfix">
            <img class="fl sub" src="img/temp/sub.jpg">
            <span class="fl" contentEditable="true">1</span>
            <img class="fl add" src="img/temp/add.jpg">
            <p class="please fl">请选择商品属性!</p>
        </div>
    </div>
    <div class="btns clearfix">
        <a href="#2">
            <p class="buy fl">立即购买</p>
        </a>
        <a href="#2">
            <p class="cart fr"  onclick="ProDetail.addCart(${+location.search.split(
              "="
            )[1]})">加入购物车</p>
        </a>
    </div>
  </div>
</div>`;
  }
  //点击加入购物车的方法
  static addCart(goods_id) {
    //判断是否有token，没有的话跳转登录页面
    let token = localStorage.getItem("token");
    // console.log(token);
    if (!token)
      location.assign(
        `login.html?returnUrl=./proDetail.html?${location.search.split("?")[1]}`
      );
    // 获取用户id
    let user_id = localStorage.getItem("user_id");
    // console.log(goods_id, token, user_id);

    //将商品加入购物车
    // 设置请求头编码格式
    axios.defaults.headers["Content-Type"] =
      "application/x-www-form-urlencoded";
    //设置请求头携带token
    axios.defaults.headers.common["authorization"] = token;
    let param = `id=${user_id}&goodsId=${goods_id}`;
    axios
      .post("http://localhost:8888/cart/add", param)
      .then(({ data, status }) => {
        //判断状态
        if (status != 200) {
          layer.msg("加入购物车失败");
          return;
        }
        if (data.code != 1)
          location.assign(
            `login.html?returnUrl=./proDetail.html?${
              location.search.split("?")[1]
            }`
          );
        // console.log(status, data);
        layer.msg("加入购物车成功");
      });
  }
  //鼠标移入移出事件
  mouseenter() {
    this.$("#mask").style.display = "block";
    this.$("#big").style.display = "block";
  }
  mouseleave() {
    this.$("#mask").style.display = "none";
    this.$("#big").style.display = "none";
  }
  //鼠标移动事件
  mousemove(eve) {
    // 在事件处理函数中,获取到鼠标在可视区的坐标
    let x = eve.pageX;
    let y = eve.pageY;
    // 获取小盒子相对于页面的左上距离
    let offLeft = this.$(".proCon").offsetLeft;
    let offTop = this.$(".proCon").offsetTop;
    // console.log(x - offLeft + "px");
    let mx = x - offLeft - 145;
    let my = y - offTop - 145;
    //设置最小和最大移动距离
    if (mx < 0) mx = 0;
    if (my < 0) my = 0;
    if (mx > 290) mx = 290;
    if (my > 290) my = 290;
    // 让小黄块跟随鼠标移动
    this.$("#mask").style.left = mx + "px";
    this.$("#mask").style.top = my + "px";
    //mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
    // img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
    this.$("#img").style.left = (-mx * 580) / 290 + "px";
    this.$("#img").style.top = (-my * 580) / 290 + "px";
  }
  //获取节点的方法
  $(ele) {
    let res = document.querySelectorAll(ele);
    return res.length == 1 ? res[0] : res;
  }
}

new ProDetail();
